<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,minimal-ui">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/cisall.css">
    <style>
        .bg-gray {
            background: #e5e6e8;
        }
        .icon-play {
            font-size: 3rem;
            color: #fff;
        }

    </style>
</head>
<body>
<!--[if lte IE 8]>
<div class="text-center padding-top-50 padding-bottom-50 bg-blue-grey-100">
    <p class="browserupgrade font-size-18">
        你正在使用一个<strong>过时</strong>的浏览器。请<a href="http://browsehappy.com/" target="_blank">升级您的浏览器</a>，以提高您的体验。
    </p>
</div>
<![endif]-->
<header>
    <nav class="navbar fixed-top  navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="../index.html">
            <img src="../../images/base/logo.png" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav navlist ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="photo.html">图片</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">数字图书馆</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="hall.html">在线展厅</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="video.html">视频专题</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="javacript:window.history(-1)"><i class="iconcis icon-goback f30"></i></a>
                </li>
                <li class="nav-item border-right">
                    <a class="nav-link" href="../index.html"><i class="iconcis icon-home f20"></i></a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="iconcis icon-search"></i>
                    </a>
                    <div class="dropdown-menu search-menu">
                        <form class="form-inline">
                            <input class="form-control" type="search" placeholder="搜索" aria-label="搜索">
                            <button class="btn" type="submit"><i class="iconcis icon-search"></i></button>
                        </form>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="iconcis icon-user"></i>
                    </a>
                    <div class="dropdown-menu login-menu">
                        <form class="index-login">
                            <div class="wrapper">
                                <h4 class="bg-line-red">登录</h4>
                                <div class="login-group">
                                    <i class="iconcis icon-user"></i>
                                    <input type="text" placeholder="请输入用户名/电子信箱">
                                </div>
                                <div class="login-group">
                                    <i class="iconcis icon-user"></i>
                                    <input type="password" placeholder="请输入密码">
                                </div>
                                <button class="btn" type="submit">立即登录</button>
                                <p class="link"><a href="register.html">免费注册</a>|<a href="password.html">忘记密码</a></p>
                                <h5>快捷登录</h5>
                                <p>用第三方账号快速登录</p>
                                <div class="row text-center">
                                    <div class="col-sm-6">
                                        <img src="../images/base/login_qq.png">
                                        <p>QQ登录</p>
                                    </div>
                                    <div class="col-sm-6">
                                        <img src="../images/base/login_wx.png">
                                        <p>微信登录</p>
                                    </div>
                                </div>
                            </div>
                            <div class="login-footer">
                                注册或登录即表示同意<br>
                                本系统的”隐私保护条款”和”使用条款”。
                            </div>
                        </form>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                        <i class="iconcis icon-map"></i>
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#"><i class="flag flag-china"></i>简体中文版</a>
                        <a class="dropdown-item" href="#"><i class="flag flag-english"></i>English</a>
                        <a class="dropdown-item" href="#"><i class="flag flag-sprache"></i>Sprache</a>
                        <a class="dropdown-item" href="#"><i class="flag flag-japan"></i>日本語</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="iconcis icon-lines"></i></a>
                </li>
            </ul>
        </div>
    </nav>
</header>

<div class="container-fluid">
    <div class="video-top-container mb-3 bg-gray">
        <div class="row">
            <div class="col-sm-12 col-md-7" style="padding: 30px 60px">
                <figure class="figure">
                    <a href="video.html">
                        <img class="img-fluid" src="../../images/upload/video_bg.jpg">
                        <figcaption class="cis-mask-back">
                            <div class="">
                                <i class="iconcis icon-play" style="font-size: 80px"></i>
                                <p class="white">视频展示Like这样也蛮好</p>
                            </div>
                        </figcaption>
                    </a>
                </figure>
            </div>
            <div class="col-sm-12 col-md-5">
                <div class="textures-info">
                    <h3>视频专题</h3>
                    <h5 class="title text-justify text-ellipsis">图片主题的具体的名称文字比内容摘要的文字要大 (25张)</h5>
                    <h6 class="subtitle mb-3 text-ellipsis">
                        来源：CIASLL-CMS&nbsp;&nbsp;更新时间：2017-03-01&nbsp;&nbsp;阅读：201</h6>
                    <div class="content">
                        2018年1月31日专业航拍社交平台SkyPixel天空之城(TM)当日宣布，与DJI大疆创新合办的2017年天空之城摄影大赛圆满结束，本次比赛吸引到自全球近150个国家和地区的用户参加，收到了超过44,800份作品。全球航拍年度大奖《冰上魅影》
                    </div>
                    <div class="mt-4">
                        <p class="cis-operate pt-4">
                            <a class="item"><i class="iconcis icon-star"></i>收藏</a>
                            <a class="item"><i class="iconcis icon-zan"></i>赞&nbsp;104</a>
                            <a class="item"><i class="iconcis icon-message"></i>评论&nbsp;94</a>
                            <span><i class="iconcis icon-share"></i>分享到&nbsp;</span>
                            <a><i class="iconcis icon-wxin c93"></i></a>
                            <a><i class="iconcis icon-qq c93"></i></a>
                            <a><i class="iconcis icon-weibo c93"></i></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="video-list">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                <div class="card hall-card">
                    <div class="card-img-top">
                        <figure class="figure">
                            <a href="hallDetail.html">
                                <img class="img-fluid" src="../../images/upload/hall_ul_01.jpg">
                                <figcaption class="cis-mask-back">
                                    <div class="slide-boom-mask">
                                        <i class="iconcis icon-play"></i>
                                        <p class="white">视频展示Like这样也蛮好</p>
                                    </div>
                                </figcaption>
                            </a>
                        </figure>
                    </div>
                    <div class="card-body">
                        <h6 class="card-title">《设计的方法论》</h6>
                        <div class="card-text row card-tags">
                            <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;2017-03-01 13:41</span>
                            <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;25842</span>
                            <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;25842</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                <div class="card hall-card">
                    <div class="card-img-top">
                        <figure class="figure">
                            <a href="hallDetail.html">
                                <img class="img-fluid" src="../../images/upload/hall_ul_01.jpg">
                                <figcaption class="cis-mask-back">
                                    <div class="slide-boom-mask">
                                        <i class="iconcis icon-play"></i>
                                        <p class="white">视频展示Like这样也蛮好</p>
                                    </div>
                                </figcaption>
                            </a>
                        </figure>
                    </div>
                    <div class="card-body">
                        <h6 class="card-title">《设计的方法论》</h6>
                        <div class="card-text row card-tags">
                            <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;2017-03-01 13:41</span>
                            <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;25842</span>
                            <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;25842</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                <div class="card hall-card">
                    <div class="card-img-top">
                        <figure class="figure">
                            <a href="hallDetail.html">
                                <img class="img-fluid" src="../../images/upload/hall_ul_01.jpg">
                                <figcaption class="cis-mask-back">
                                    <div class="slide-boom-mask">
                                        <i class="iconcis icon-play"></i>
                                        <p class="white">视频展示Like这样也蛮好</p>
                                    </div>
                                </figcaption>
                            </a>
                        </figure>
                    </div>
                    <div class="card-body">
                        <h6 class="card-title">《设计的方法论》</h6>
                        <div class="card-text row card-tags">
                            <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;2017-03-01 13:41</span>
                            <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;25842</span>
                            <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;25842</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                <div class="card hall-card">
                    <div class="card-img-top">
                        <figure class="figure">
                            <a href="hallDetail.html">
                                <img class="img-fluid" src="../../images/upload/hall_ul_01.jpg">
                                <figcaption class="cis-mask-back">
                                    <div class="slide-boom-mask">
                                        <i class="iconcis icon-play"></i>
                                        <p class="white">视频展示Like这样也蛮好</p>
                                    </div>
                                </figcaption>
                            </a>
                        </figure>
                    </div>
                    <div class="card-body">
                        <h6 class="card-title">《设计的方法论》</h6>
                        <div class="card-text row card-tags">
                            <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;2017-03-01 13:41</span>
                            <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;25842</span>
                            <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;25842</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="loadingmore text-center">加载更多</div>
    </section>
</div>

<script src="../../js/base.js"></script>
<script src="../../js/cisall.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        autoplay: true,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });

</script>
</body>
</html>